<template>
  <div class="pt-6 bg-white" ref="chartRef" :style="{ height: '530px', width: '100%' }"></div>
</template>
    <script lang="ts">
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';

import { useECharts } from '/@/hooks/web/useECharts';
import { getLineData } from '../chart/data';

export default defineComponent({
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
    const { barData, lineData, category } = getLineData;
    onMounted(() => {
      setOptions({
        backgroundColor: 'white',
        legend: {
          data: ['单期', '累计'],
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333',
            },
          },
        },
        grid: {
          left: '8%',
          right: '5%',
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: '#666',
            },
          },
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#666',
            },
          },
        },
        series: [
          {
            name: '单期',
            type: 'line',
            smooth: false,
            showAllSymbol: 'auto',
            symbol: 'emptyCircle',
            symbolSize: 8,
            data: lineData,
          },
          {
            name: '累计',
            type: 'line',
            smooth: false,
            showAllSymbol: 'auto',
            symbol: 'emptyCircle',
            symbolSize: 8,
            data: barData,
          },
        ],
      });
    });
    return { chartRef };
  },
});
</script>
